<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Datatables</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
	<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/datatables/1.10.19/css/dataTables.jqueryui.css">
	<style>
	</style>
</head>
<body>
<div class="ok-body">
	<!--模糊搜索区域-->
	<div class="layui-row">
		<form class="layui-form layui-col-md12 ok-search">
			<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
			<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
			<input class="layui-input" placeholder="账号" autocomplete="off" name="username">
			<button class="layui-btn" lay-submit="" lay-filter="search">
				<i class="layui-icon">&#xe615;</i>
			</button>
		</form>
	</div>
	<!--数据表格-->
	<table id="userTable" class="table table-striped table-bordered" cellspacing="0" width="100%"/>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.bootcss.com/datatables/1.10.19/js/dataTables.jqueryui.js"></script>
<script>
	layui.use(["element", "util", "form", "laydate", "okMock", "okUtils"], function () {
		let util = layui.util;
		let okMock = layui.okMock;
		let form = layui.form;
		let laydate = layui.laydate;
		
		okLoading.close();
		util.fixbar({});

		laydate.render({elem: "#startTime", type: "datetime"});
		laydate.render({elem: "#endTime", type: "datetime"});

		$.fn.dataTable.defaults.oLanguage = {
			"sProcessing": "处理中...",
			"sLengthMenu": "显示 _MENU_ 项结果",
			"sZeroRecords": "没有匹配结果",
			"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
			"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
			"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
			"sInfoPostFix": "",
			"sSearch": "搜索：",
			"sUrl": "",
			"sEmptyTable": "表中数据为空",
			"sLoadingRecords": "载入中...",
			"sInfoThousands": ",",
			"oPaginate": {
				"sFirst": "首页",
				"sPrevious": "上页",
				"sNext": "下页",
				"sLast": "末页"
			},
			"oAria": {
				"sSortAscending": ": 以升序排列此列",
				"sSortDescending": ": 以降序排列此列"
			}
		}

		$("#userTable").DataTable({
			ajax: {
				url: okMock.api.datatables,
				type: "get",
			},
			columns: [
				{data: "id", title: "ID"},
				{data: "username", title: "账号"},
				{data: "password", title: "密码"},
				{data: "nickname", title: "昵称"},
				{data: "name", title: "姓名"},
				{data: "role", title: "角色"},
				{data: "status", title: "状态"},
				{data: "email", title: "邮箱"},
				{data: "phone", title: "手机"},
				{data: "createTime", title: "创建时间"},
				{data: "updateTime", title: "更新时间"},
			]
		});

		form.on("submit(search)", function (data) {
			return false;
		});
	});
</script>
</body>
</html>
